<template>
    <div class="tmpl">
        <nav-bar title="商品详情"></nav-bar>
        <div class="outer-swiper">
            <!--<div class="swiper">-->
            <!--我真的是轮播图-->
            <!--</div>-->
            <my-swipe :url="lunbo"></my-swipe>
        </div>

        <div class="product-desc">
            <ul>
                <li><span class="product-desc-span" v-text="goods.title">
                    商品标题
                </span></li>
                <li class="price-li">市场价：
                    <s>￥{{goods.marketPrice}}</s> 销售价：<span>￥{{goods.sellPrice}}</span></li>
                <li class="number-li">购买数量：<span @click="minus()">-</span><span>{{goodsNum}}</span><span
                        @click="add()">+</span></li>
                <li>
                    <mt-button type="primary">立即购买</mt-button>
                    <mt-button type="danger" @click="addCart()">加入购物车</mt-button>
                </li>
            </ul>
        </div>

        <!-- 小球 -->
        <!-- @after-enter 钩子函数 -->
        <transition name="ball" @after-enter="afterEnter">
            <div class="ball" v-if="isShow"></div>
        </transition>

        <div class="product-props">
            <ul>
                <li>商品参数</li>
                <li>商品货号：{{goods.goodsNo}}</li>
                <li>库存情况：{{goods.stockQuantity}}件</li>
                <li>上架时间：{{goods.addTime}}</li>
            </ul>
        </div>
        <div class="product-info">
            <ul>
                <li>
                    <mt-button type="primary" size="large" plain @click="goodsPicture()">图文介绍</mt-button>
                </li>
                <li>
                    <mt-button type="danger" size="large" plain @click="goodsComment()">商品评论</mt-button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import connect from '../../components/common/connect.js';
    import prodTools from '../../components/common/prodTools.js';

    export default {
        name: "goodsDetail",
        data() {
            return {
                goods: {},
                goodsNum: 1,
                goodsId: this.$route.query.id,
                lunbo: '',
                isShow: false,

            }
        },
        created() {
            // //获取路由参数id
            // this.goodsId = this.$route.query.id;
            //轮播图的请求路径
            this.lunbo = 'goodsChart/getGoodsChartByGoodsId/' + this.goodsId;
            // 发起请求获取详情数据
            this.$ajax.get('/goods/findGoodsById/' + this.goodsId)
                .then(res => {
                    this.goods = res.data.message;
                })
                .catch(err => {
                    console.log(err)
                });

            // //使用合并请求
            // this.$ajax.all([
            //     this.$ajax.get('/getGoodsDetail/'+id),
            //     this.$ajax.get('/getGoodsImgs/'+id)
            // ])
            // //分发响应
            //     .then(this.$ajax.spread((res1,res2)=>{
            //         this.goods = res1.data.message;
            //         this.imgs = res2.data.message;
            //     }))
            //     .catch(err=>{
            //         console.log(err)
            //     })
        },
        methods: {
            add() {
                let num = this.goodsNum;
                if (num < this.goods.stockQuantity)
                    this.goodsNum++;
            },
            minus() {
                let num = this.goodsNum;
                num--;
                if (num < 1) {
                    num = 1;
                }
                this.goodsNum = num;
            },
            //添加购物车
            addCart() {
                // console.log('开始emit');
                connect.$emit('addShopCart', this.goodsNum);
                //让小球飞起来,也就是插入ball这个元素
                this.isShow = true;

                //调用工具对象添加商品
                prodTools.addOrUpdate({
                    id: this.goods.id,
                    num: this.goodsNum
                })
                // console.log(prodTools.getProds())

            },
            //处理过渡效果进入之后的行为
            afterEnter() {
                this.isShow = false;
            },

            //商品评论
            goodsComment() {
                this.$router.push({
                    name: 'goods.comment',
                    query: {goodsId: this.goodsId},

                })
            },
            //商品图文信息
            goodsPicture(){
                this.$router.push({
                    name: 'goods.pictureInfo',
                    query: {goodsId: this.goodsId},

                })
            }

        }

    }
</script>

<style scoped>

    .ball-enter-active {
        animation: bounce-in .3s;
    }

    @keyframes bounce-in {
        0% {
            /*3d流畅性好一些*/
            transform: translate3d(0, 0, 0);
        }
        10% {
            transform: translate3d(15px, -20px, 0);
        }
        20% {
            transform: translate3d(30px, -35px, 0);
        }
        30% {
            transform: translate3d(35px, -40px, 0);
        }
        40% {
            transform: translate3d(40px, -50px, 0);
        }
        50% {
            transform: translate3d(45px, -40px, 0);
        }
        60% {
            transform: translate3d(50px, -35px, 0);
        }
        70% {
            transform: translate3d(65px, -20px, 0);
        }
        80% {
            transform: translate3d(80px, 0px, 0);
        }
        90% {
            transform: translate3d(80px, 200px, 0);
        }
        100% {
            transform: translate3d(80px, 300px, 0);
        }
    }

    .swiper {
        border: 1px solid rgba(0, 0, 0, 0.2);
        margin: 8px;
        width: 95%;
        border-radius: 15px;
        overflow: hidden;
    }

    .outer-swiper,
    .product-desc,
    .product-props,
    .product-info {
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        margin: 3px;
    }

    /*请ulpadding*/

    .outer-swiper ul,
    .product-desc ul,
    .product-props ul,
    .product-info ul {
        padding: 0;
    }

    .product-desc ul li,
    .product-props ul li,
    .product-info ul li {
        list-style: none;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.5);
        margin-top: 8px;
    }

    .product-desc ul > :nth-child(1) span {
        color: blue;
        font-size: 22px;
        font-weight: bold;
    }

    .product-desc ul > :nth-child(1) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    }

    .product-desc ul,
    .product-info ul,
    .product-props ul {
        padding-left: 10px;
    }

    .price-li span {
        color: red;
        font-size: 25px;
    }

    .price-li s {
        margin-right: 16px;
    }

    /*加减*/

    .number-li span {
        display: inline-block;
        border: 2px solid rgba(0, 0, 0, 0.1);
        width: 25px;
    }

    /*商品参数*/

    .product-props ul > :nth-child(1) {
        text-align: left;
    }

    .product-props ul:not(:nth-child(1)) {
        margin-left: 40px;
    }

    .product-info ul {
        margin-bottom: 70px;
        padding: 0px 5px;
    }

    .number-li span {
        text-align: center;
    }

    .number-li > :nth-child(2) {
        width: 40px;
    }

    .ball {
        border-radius: 50%;
        background-color: red;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 440px;
        left: 120px;
        display: inline-block;
        z-index: 9999;
    }

</style>